import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/Login.vue'
import Register from '@/views/Register.vue'
import Profile from '@/views/Profile.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // 重定向
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login, name: 'login' },
    { path: '/register', component: Register, name: 'register' },
    { path: '/profile', component: Profile, name: 'profile' }
  ]
})

// 全局前置守卫
// 所有的路由在被真正访问之前,都会先经过全局守卫
// 只要全局前置守卫放行了才能真正的访问你所需要访问的路由
// to: 到哪去
// from: 从哪里来(这个基本不用,)
// next: 是一个函数,决定了是否放行, next() 放行 next('/login') 拦截到登录
// 将来的页面有两种情况
// 1. 需要授权才能访问, 比如:
// 个人中心页,我的收藏, 我的关注,编辑信息等等....
// 2. 不需要授权,可以直接访问, 比如
// 登录页,注册页,首页

// 这个数组中,专门存放所有需要授权的路径
const Authrls = ['/profile']

router.beforeEach((to, from, next) => {
  // 需要授权的 和 不需要授权的处理方式不一样
  // 如果要去的路径,在授权数组中,说明需要授权才能访问
  console.log(to.path)

  if (Authrls.includes(to.path)) {
    // 需要授权访问的路径,判断有没有 token令牌
    // 有 token  放行, 如果没有,拦截到登录
    const token = localStorage.getItem('token')
    if (token) {
      next() // 如果有token, 放行
    } else {
      router.push('/login')
    }
  } else {
    // 不需要授权的路径,放行
    next()
  }
})

export default router
